<div class="drag-n-draw-image-recorder">
  <div class="workspace{{?it.isEditMode}} editing{{?}}">
    <div class="images"></div>
    <div class="recordStroke"></div>
      {{? it.isEditMode}}<div class="transform-origin"></div>{{?}}
      {{? !it.isEditMode}}
    <canvas
            id="drawing-canvas"
            width="{{=it.widgetWidth}}"
            height="{{=it.widgetHeight}}"
            style="width: {{=it.widgetWidth}}px; height: {{=it.widgetHeight}}px;"
    ></canvas>
      {{?}}
  </div>
  <div class="tips"></div>
    {{?it.isEditMode}}
  <div class="preset-tools">
    <div class="level1" style="text-align: center;">
      <button data-tool="move">移动</button>
      <button data-tool="add-image">添加图片</button>
      <button data-tool="settings">设置属性</button>
      <button data-tool="set-transform-origin">设置旋转中心</button>
      <button data-tool="remove">删除</button>
      <button data-tool="export-data">导出数据</button>
    </div>
  </div>
  <div class="modal">
    <div class="body image-selector-container">
      <div class="image-selector"></div>
    </div>

    <div class="body image-props">
      <div data-prop="width"><span>宽度: </span> <input type="number" /></div>
      <div data-prop="height"><span>高度: </span> <input type="number" /></div>
      <div data-prop="draggable"><span>可拖动: </span> <input type="checkbox" /></div>
      <div data-prop="infiniteDrag"><span>可重复拖动: </span> <input type="checkbox" /></div>
      <p style="font-size: 14px;">注：设置为可拖动后可重复拖动属性才有效。</p>
      <div data-prop="rotatable"><span>可旋转: </span> <input type="checkbox" /></div>
      <p style="font-size: 14px;">注：双击图片显示旋转按钮，拖动旋转按钮以旋转图片。</p>
      <div data-prop="rotateBtnVisible"><span>默认显示旋转按钮: </span> <input type="checkbox" /></div>
      <div data-prop="rotateStep"><span>旋转角度步长: </span> <input type="number" style="width: 100px;"/> 度</div>
      <div data-prop="group"><span>分组号: </span> <input type="number" style="width: 100px;" /></div>
      <p style="font-size: 14px;">
        注：设置分组后，可通过设置按钮控件的参数属性为分组号并将按钮的点击信号绑定到本控件的接口设置分组的显示与隐藏。
        显示某一分组的图片时，其它分组的图片如果没有被拖动过则会被隐藏，未分组的图片不会被隐藏。
      </p>
      <div data-prop="hidden"><span>隐藏：</span> <input type="checkbox" /></div>
      <p style="font-size: 14px;">
        注：隐藏的图片设置分组后，可通过控件的显示分组接口显示。
      </p>
    </div>

    <div class="body exported-data"></div>
    <div style="position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; padding: 10px 0;">
      <button class="ok" style="padding: 10px 30px;">确定</button>
    </div>
  </div>
    {{?}}
</div>
